<template>
  <div class="order-list PublicListStyle">
    <template v-if='beforeGetFocus'>
      <div class='searchDiv marginBottom-20'>
        <i class='el-icon-search searchBtn'></i>
        <el-input placeholder="订单号/姓名/电话" class='searchInput' @focus='onFousEvent'></el-input>
      </div>
    </template>
    <template v-else>
      <div class='onfousInput marginBottom-20'>
        <div class='onfocusInputContent'>
          <i class='el-icon-search searchBtn1'></i>
          <el-input placeholder="订单号/姓名/电话"  class='searchInput1' :maxlength='20' v-model='searchCondition.search' @keyup.native.enter='loadList(1)' ref='searchInput1'></el-input>
          <i class='el-icon-close closeSearch' @click='closeSearch("searchForm")'></i>
          <el-button type='primary' class='btn-cancel resetCustomer' @click='resetCondition("searchForm")'>条件重置</el-button>
          <el-button type='primary' class='btn-primary searchCustomer' @click='loadList(1)'>搜索</el-button>
          <div class='lineStyle'></div>
          <div class='conditionBtn'>
            更多条件筛选
         </div>
          <div class='searchByCondition' >
            <el-form :inline="true" class="demo-form-inline" ref='searchForm' :model='searchCondition'>
              <el-form-item label="状态" prop='status' v-if="activeName==='all'">
                <el-select  @change='loadList(1)' v-model='searchCondition.status'>
                  <el-option label="全部" value=""></el-option>
                  <el-option label="待验票" value="Wait_Check"></el-option>
                  <el-option label="已验票" value="Checked"></el-option>
                  <el-option label="待支付" value="WaitPay"></el-option>
                  <el-option label="已退票" value="Refund"></el-option>
                  <el-option label="已关闭" value="Closed"></el-option>
                </el-select>
              </el-form-item>
              <div style="display: inline-block;">
                <el-form-item label="发车时间从" style='margin-right:15px;'>
                  <el-date-picker v-model="searchCondition.rideTimeOne" type="datetime"
                                  placeholder="开始时间" :editable="false" format="yyyy-MM-dd HH:mm"
                                  @change="changeDate('rideTimeOne')"></el-date-picker>
                </el-form-item>
                <el-form-item label="到">
                  <el-date-picker v-model="searchCondition.rideTimeTwo" type="datetime"
                                  placeholder="结束时间" :editable="false" format="yyyy-MM-dd HH:mm"
                                  @change="changeDate('rideTimeTwo')"></el-date-picker>
                </el-form-item>
              </div>
              <div style="display: inline-block;">
                <el-form-item label="购买日期从" style='margin-right:15px;'>
                  <el-date-picker v-model="searchCondition.orderTimeOne" type="date"
                                  placeholder="开始时间" :editable="false"
                                  @change="changeDate('orderTimeOne')"></el-date-picker>
                </el-form-item>
                <el-form-item label="到">
                  <el-date-picker v-model="searchCondition.orderTimeTwo" type="date"
                                  placeholder="结束时间" :editable="false"
                                  @change="changeDate('orderTimeTwo')"></el-date-picker>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </template>

    <div class="primary_bg" v-loading="isLoading" element-loading-text="拼命加载中">
      <el-table :data="tableData.elements"
                @row-click="openDetail">
        <el-table-column label="订单号" prop="number"
                         width="190px"></el-table-column>
        <el-table-column label="线路" prop="line"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="发车时间" prop="rideTime"
                         width="155px">
          <template slot-scope="scope">
            {{ scope.row.rideTime | formatMinutes }}
          </template>
        </el-table-column>
        <el-table-column label="购票人" prop="buyerInfo"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="票数（张）" prop="count"
                         width="105px"></el-table-column>
        <el-table-column label="单价（元）" prop="price"
                         width="105px">
          <template slot-scope="scope">
            {{ scope.row.price | currency('', 2) }}
          </template>
        </el-table-column>
        <el-table-column label="合计金额" prop="totalPrice"
                         width="105px">
          <template slot-scope="scope">
            {{ scope.row.totalPrice | currency('', 2) }}
          </template>
        </el-table-column>
        <el-table-column label="下单时间" prop="orderTime"
                         width="155px">
          <template slot-scope="scope">
            {{ scope.row.orderTime | formatMinutes }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status"
                         width="80px"
                         v-if="activeName==='all'">
          <template slot-scope="scope">
            {{ scope.row.status | formatStatus }}
          </template>
        </el-table-column>
      </el-table>

      <el-pagination v-if="parseInt(tableData.totalAmount)>0"
                     :current-page="tableData.page" :page-size="tableData.size"
                     :total="parseInt(tableData.totalAmount)" layout="total, prev, pager, next"
                     @current-change="loadList"></el-pagination>
    </div>

    <mk-order-detail :dialog-visible="detailDialogVisible"
                     :current-id="currentId"
                     @closeDialog="detailDialogVisible = false"></mk-order-detail>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  //  import MkPermission from "../../../components/MkPermission";
  import MkOrderDetail from './orderDetail.vue'
  import ticketService from '../../../services/ticket'

  export default {
    name: 'MkChangeTicketList',

    components: {
      MkOrderDetail
    },

    props: ['activeName'],

    watch: {
      activeName: function (value) {
        this.closeSearch();
      }
    },

    methods: {
      loadList (pageValue) {
        this.isLoading = true;
        if (pageValue) {
          this.searchCondition['page.pn'] = pageValue;
        }
        ticketService.loadOrderListServer (this.searchCondition, data => {
          this.tableData = data.data;
          this.isLoading = false;
        });
      },

      changeDate(type) {
        if (this.searchCondition[type]) {
          if (type === 'rideTimeOne' || type === 'rideTimeTwo') {
            this.searchCondition[type] = new Date(this.searchCondition[type]).pattern('yyyy-MM-dd HH:mm');
          } else {
            this.searchCondition[type] = new Date(this.searchCondition[type]).pattern('yyyy-MM-dd');
          }
        } else {
          this.searchCondition[type] = '';
        }
        this.loadList(1);
      },

      openDetail (row) {
        this.currentId = row.id;
        this.detailDialogVisible = true;
      },

      onFousEvent() {
        this.beforeGetFocus = false;
        this.$nextTick(() => {
          this.$refs.searchInput1.$el.children[0].focus();
        });
      },

      closeSearch() {
        this.beforeGetFocus = true;
        this.resetCondition();
      },

      resetCondition() {
        this.searchCondition['page.pn'] = 1;
        this.searchCondition.search = '';
        this.searchCondition.orderTimeOne = '';
        this.searchCondition.orderTimeTwo = '';
        this.searchCondition.rideTimeOne = '';
        this.searchCondition.rideTimeTwo = '';
        if (this.activeName === 'all') {
          this.searchCondition.status = '';
        } else {
          this.searchCondition.status = this.activeName;
        }
        this.loadList(1);
      }
    },

    mounted: function() {
      this.loadList(1);
    },

    data () {
      return {
        beforeGetFocus: true,
        isLoading: false,
        detailDialogVisible: false,
        currentId: '',
        searchCondition: {
          'page.pn': 1,
          'page.size': 10,
          search: '',
          orderTimeOne: '',
          orderTimeTwo:'',
          rideTimeOne:'',
          rideTimeTwo:'',
          status:'',
        },
        tableData: {}
      }
    },

    filters: {
      formatMinutes (value) {
        if (value) {
          return new Date(value).pattern('yyyy-MM-dd HH:mm');
        } else {
          return '';
        }
      },
      formatStatus (value) {
        if (value === 'Wait_Check') {
          return '待验票';
        } else if (value === 'Checked') {
          return '已验票';
        } else if (value === 'WaitPay') {
          return '待支付';
        } else if (value === 'Refund') {
          return '已退票';
        } else {
          return '已关闭';
        }
      }
    }
  }
</script>

<style lang='less'>
  @import '../../../assets/style/main.less';
  .order-list {
    .primary_bg {
      padding: 0 30px;
      background-color: #fff;
    }
  }

</style>
